<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>维修请求管理</h2>
    <div>
      <button class="btn btn-success me-2" routerLink="/create-request">
        <i class="bi bi-plus"></i> 新建请求
      </button>
      <button class="btn btn-primary" (click)="loadRepairRequests()">
        <i class="bi bi-arrow-clockwise"></i> 刷新
      </button>
    </div>
  </div>

  <div *ngIf="loading" class="text-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
  </div>

  <div class="row" *ngIf="!loading">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">维修请求列表</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>标题</th>
                  <th>设备</th>
                  <th>优先级</th>
                  <th>状态</th>
                  <th>申请人</th>
                  <th>分配给</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let request of repairRequests">
                  <td>{{ request.id }}</td>
                  <td>{{ request.title }}</td>
                  <td>{{ request.device?.name || '未知设备' }}</td>
                  <td>
                    <span class="badge bg-{{ getPriorityClass(request.priority) }}">
                      {{ getPriorityText(request.priority) }}
                    </span>
                  </td>
                  <td>
                    <span class="badge bg-{{ getStatusClass(request.status) }}">
                      {{ getStatusText(request.status) }}
                    </span>
                  </td>
                  <td>{{ request.requestedBy }}</td>
                  <td>{{ request.assignedTo || '未分配' }}</td>
                  <td>{{ request.createdAt | date:'yyyy-MM-dd HH:mm' }}</td>
                  <td>
                    <div class="btn-group btn-group-sm">
                      <button class="btn btn-outline-info" title="查看详情">
                        <i class="bi bi-eye"></i>
                      </button>
                      <button *ngIf="request.status === 'Pending'" 
                              class="btn btn-outline-success" 
                              (click)="approveRequest(request.id)"
                              title="审批通过">
                        <i class="bi bi-check"></i>
                      </button>
                      <button *ngIf="request.status === 'Pending'" 
                              class="btn btn-outline-danger" 
                              (click)="rejectRequest(request.id)"
                              title="拒绝">
                        <i class="bi bi-x"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div *ngIf="repairRequests.length === 0" class="text-center py-4">
            <p class="text-muted">暂无维修请求</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 